<template>
    <div class="log">
        <div class="logk">
            <van-icon class="icon" name="fire-o" />
            <div class="ltext">网易严选</div>
        </div>
    </div>

    <div class="wke">
        <div class="ke" v-if="lgm">
            <div class="ohome">
                <van-button @click="onlg" type="primary" size="large">手机号快捷登录</van-button>
            </div>
            <div class="qs">
                <div class="qk">

                    <div class="mq">
                        <van-icon class="icon" size="20" name="fire-o" />
                        <!-- <div class="icon"></div> -->
                        <div class="qtext">微信</div>
                    </div>

                    <div class="mq">
                        <van-icon class="icon" size="20" name="fire-o" />
                        <div class="qtext">QQ</div>
                    </div>

                    <div class="mq">
                        <van-icon class="icon" size="20" name="fire-o" />
                        <div class="qtext">微博</div>
                    </div>

                </div>
            </div>
        </div>

        <div class="trueke" v-else>
            <div class="truehome">
                <van-form>
                    <van-cell-group inset>
                        <!-- 输入手机号，调起手机号键盘 -->
                        <van-field v-model="phones" type="tel" placeholder="请输入手机号"
                            :rules="[{ pattern, message: '请填正确手机号' }]" />
                        <!-- 输入密码 -->
                        <van-field v-model="passwords" type="password" placeholder="请输入密码"
                            :rules="[{ required: true, message: '请填正确密码' }]" />
                    </van-cell-group>

                </van-form>


            </div>

            <div class="zc">
                <div @click="wj">忘记密码</div>
                <router-link to="/appleid" replace: true @click="dzc">注册账号</router-link>
            </div>

            <van-button native-type="submit" class="dla" @click="tolg" type="primary" size="large">登录</van-button>

            <div>
                <van-checkbox v-model="checked" shape="square">是否同意条款</van-checkbox>
            </div>

        </div>
    </div>
</template>
    
<script setup lang="ts">
import { getstatus, login } from '@/api/login';
import { useloginstore } from '@/stores/login'
import { ref } from 'vue'
import { storeToRefs } from 'pinia';
import { useRoute, useRouter } from 'vue-router';
import { showFailToast, showNotify } from 'vant';

const pattern = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
let checked = ref(false)
let router = useRouter()
let loginstore = useloginstore()
let { userinfo, mphone, cont } = storeToRefs(loginstore)
let lgm = ref(true)
let userinfos = ref()
let route = useRoute()
let phones = ref()
let passwords = ref()
interface dl {
    phone: number | string | undefined,
    password: number | string | undefined
}

let onlg = () => {
    phones.value = mphone.value
    lgm.value = false

}
let wj = () => {
    showNotify({ type: 'primary', message: '笑死' });
}

let dzc = () => {
    cont.value = -2
}

let tolg = async () => {
    if (checked.value) {
        let phone = phones.value
        let password = passwords.value
        let data: dl = {
            phone, password
        }
        let xinxi: any = await login(data)

        // console.log('login', xinxi);
        localStorage.setItem('token_key', xinxi.token)
        userinfos.value = await getstatus()
        // console.log('用户结果', userinfos.value);
        if (userinfos.value.nickName) {
            userinfo.value = userinfos.value
            router.go(cont.value)
            cont.value = -1
        }

    } else {
        showFailToast('必须同意条款');
    }
}

</script>
    
<style lang="less" scoped>
.log {
    width: 100%;
    margin-top: 100px;
    display: flex;

    .logk {
        display: flex;
        font-weight: bold;
        margin: auto;

        .ltext {
            font-size: 25px;
        }
    }
}

.wke {
    .ke {
        margin-top: 50px;

        .ohome {
            display: flex;
            justify-content: center;
        }

        .qs {
            width: 100%;
            position: absolute;
            bottom: 100px;
            display: flex;

            .qk {
                margin: auto;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: space-around;

                .mq {
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    height: 100%;

                    .icon {
                        width: 22px;
                        height: 22px;
                        margin: 0 10px;
                    }

                    .qtext {
                        padding-right: 10px;
                        border-right: 1px solid;
                        height: 22px;
                        text-align: center;
                        line-height: 22px;
                        font-size: 16px;
                    }

                    &:last-child {
                        .qtext {
                            border: 0px;
                        }
                    }
                }
            }
        }
    }

    .trueke {
        margin-top: 40px;

        .truehome {
            .van-cell-group {
                .van-cell {
                    height: 65px;
                }
            }
        }

        .zc {
            margin: 20px;
            font-size: 16px;
            display: flex;
            justify-content: space-between;
        }

        .dla {
            margin-bottom: 10px;
        }

        .van-checkbox {
            font-size: 16px;
        }
    }
}
</style>